<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../../common/taglib.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <%@include file="../../common/common-css.jsp" %>
    <%@include file="../../common/common-js.jsp" %>
    <%@include file="../../common/init.jsp" %>
    <style type="text/css">
      input{font-size: 12px}
    </style>
            <style type="text/css">  
	#preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}  
	#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}  
</style>  
<script type="text/javascript">  
function previewImage(file)  
{  
  var MAXWIDTH  = 100;  
  var MAXHEIGHT = 100;  
  var div = document.getElementById('preview');  
  if (file.files && file.files[0])  
  {  
    div.innerHTML = '<img id=imghead>';  
    var img = document.getElementById('imghead');  
    img.onload = function(){  
      var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);  
      img.width = rect.width;  
      img.height = rect.height;  
      img.style.marginLeft = rect.left+'px';  
      img.style.marginTop = rect.top+'px';  
    }  
    var reader = new FileReader();  
    reader.onload = function(evt){img.src = evt.target.result;}  
    reader.readAsDataURL(file.files[0]);  
  }  
  else  
  {  
    var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';  
    file.select();  
    var src = document.selection.createRange().text;  
    div.innerHTML = '<img id=imghead>';  
    var img = document.getElementById('imghead');  
    img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;  
    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);  
    status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);  
    div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>";  
  }  
}  
function clacImgZoomParam( maxWidth, maxHeight, width, height ){  
    var param = {top:0, left:0, width:width, height:height};  
    if( width>maxWidth || height>maxHeight )  
    {  
        rateWidth = width / maxWidth;  
        rateHeight = height / maxHeight;  
          
        if( rateWidth > rateHeight )  
        {  
            param.width =  maxWidth;  
            param.height = Math.round(height / rateWidth);  
        }else  
        {  
            param.width = Math.round(width / rateHeight);  
            param.height = maxHeight;  
        }  
    }  
      
    param.left = Math.round((maxWidth - param.width) / 2);  
    param.top = Math.round((maxHeight - param.height) / 2);  
    return param;  
}  
</script> 
  </head>
  
  <body>
    <div style="height: 100%;overflow-y: auto;">
<form action="${pageContext.servletContext.contextPath }/background/resources/update.html" method="post"  enctype="multipart/form-data" data-validator-option="{theme:'yellow_right_effect',stopOnError:true}">
	<input type="hidden" name="id" value="${resources.id}">
		<div class="right">
        	<div class="volume">
            	<img src="${pageContext.servletContext.contextPath }/images/toleft.png" style="margin:23px 0 0 2px;_margin:23px 0 0 0px;" />
            </div>
        	<div class="rightcon">
            	<div class="title">
                	您当前的位置：首页 >资源管理 > 修改资源
                </div>
                	<div class="titlecon">
                           	修改资源
                    </div>
                	<div class="addlist">
                        
                        	<table class="addlistcon" border="0" cellpadding="0" cellspacing="0">
                            	<tr>
                                	<td width="30%" align="right" class="odd"><span style="color:#900">*</span>上级资源：
                                    </td>
                                    <td width="70%"  class="even">
                                   <select  name="parentId" id="parentId" style="height: 20px;width: 200px" >
										 	<option value="1010">顶级菜单</option>
											<c:forEach var="key" items="${resLists}">
								<option value="${key.id}" <c:if test="${key.id eq resources.parentId}">selected="selected"</c:if>>${key.name}</option>
							</c:forEach>
										</select>
                                    </td>
                                </tr>
                                <tr>
                                	<td  align="right" class="odd"><span style="color:#900">*</span>资源名称：
                                    </td>
                                    <td   class="even"> 
                                    <input style="height: 20px;width: 200px" name="name"  value="${resources.name}" type="text" data-rule="资源名称: required;name;"/>
                                    </td>
                                </tr>
                                 <tr>
                                	<td  align="right" class="odd"><span style="color:#900">*</span>资源KEY：
                                    </td>
                                    <td   class="even"> 
                                   <input type="text" id="officeHours1" name="resKey" style="height: 20px;width: 200px" value="${resources.resKey}" data-rule="资源KEY: required;name;"/>
                                    </td>
                                </tr>
                                <tr>
                                	<td  align="right" class="odd"><span style="color:#900">*</span>资源URL：
                                    </td>
                                    <td   class="even"> 
                                  <input style="height: 20px;width: 200px" name="resUrl" value="${resources.resUrl}" type="text" data-rule="资源URL: required;name;"/>
                                    </td>
                                </tr>
                                  <tr>
                                	<td  align="right" class="odd"><span style="color:#900">*</span>资源URL：
                                    </td>
                                    <td   class="even"> 
                                  	<input name="type" type="radio" value="0" <c:if test="${resources.type eq '0'}">checked="checked"</c:if>/>:目录　　
									<input name="type" type="radio" value="1" <c:if test="${resources.type eq '1'}">checked="checked"</c:if>/>:菜单　　
									<input name="type" type="radio" value="2" <c:if test="${resources.type eq '2'}">checked="checked"</c:if>/>:按扭
                                    </td>
                                </tr>
                                <tr>
                                	<td  align="right" class="odd"><span style="color:#900"></span>优先级：
                                    </td>
                                    <td   class="even"> 
                                    <input style="height: 20px;width: 200px" name="levels" type="text" value="${resources.levels}" />
                                    </td>
                                </tr>
                                <tr>
                                	<td  align="right" class="odd"><span style="color:#900"></span>图片上传：
                                    </td>
                                    <td   class="even">
										<input type="hidden" name="imgurl" value="${resources.imgurl }">
										<input type="file" id="file" name="file" onchange="previewImage(this)">
										<div id="preview">
											<img id="imghead" src="${pageContext.servletContext.contextPath }${resources.imgurl }" width=100 height=100 border=0>
										</div>
                                    </td>
                                </tr>
                                <br/>
								<br/>
								<br/>
								<br/>
								<br/>
                                 <tr>
                                	<td  align="right" class="odd"><span style="color:#900"></span>资源描述：
                                    </td >
                                    <td align="left"><textarea name="description">${resources.description}</textarea>
                                    </td>
                                </tr>
                             
                              </table> 
                             <div class="savere" style="float:center; margin-left:34%; _margin-left:17%;">
                               <input type="image" src="${pageContext.servletContext.contextPath }/images/baocun.png" width="101" height="46"/>
							        <a href="javascript:history.go(-1)" ><img src="${pageContext.servletContext.contextPath }/images/fanhui.png" width="101" height="46"></a>
                            </div>
                         
                    </div><!--addlist-->
            </div><!--rightcon-->
        </div><!--right-->
</form>
</div>
  </body>
</html>